<template>
	<view class="navigator flex_sbc">
		<navigator open-type="navigateBack" hover-class="none" class="uni-585C66">取消</navigator>
		<view class="z-font-32">选择已有课程</view>
		<view class="uni-color-main" @click="buttonClick">确认</view>
	</view>
	<scroll-view scroll-y class="content" @scrolltolower="nextPage">
		<view class="switch-box flex_sbc">
			<view :class="['item', !tabStatus ? 'uni-white-bg text-w' : 'uni-585C66']" @click="switchTab(0)">
				{{ type ? '学员课程' : '课程库选课' }}
			</view>
			<view :class="['item', tabStatus ? 'uni-white-bg text-w' : 'uni-585C66']" @click="switchTab(1)">
				{{ type ? '学员计划课程' : '计划库选课' }}
			</view>
		</view>
		<search-box class="uni-mt-32" @search="search"></search-box>
		<view class="z-font-32 uni-mt-40">
			已选择课程
			<text class="uni-orange">{{ selList.length }}</text>
			个
		</view>
		<view v-if="tabStatus">
			<view v-if="data[1] && data[1].list && data[1].list.length">
				<view v-for="item in data[1].list" :key="item.id">
					<view class="system-box flex_sbc" @click="allSelete(item)">
						<view class="text-w flex_fsc">
							<view class="u-line-1" style="max-width: 400rpx">{{ item.name }}:</view>
							<view class="flex_sh">关联课程 {{ item.courseList ? item.courseList.length : 0 }} 个</view>
						</view>
						<image
							:src="setting.oss_pub_domain + '/app-img/icon/icon_drop-up.png'"
							class="icon-size-32"
							style="transform: rotate(180deg)"
						></image>
					</view>
					<view
						v-for="course in item.courseList"
						:key="course.id"
						:class="[
							'plan-box active',
							selList.findIndex((el) => el.id == course.id) >= 0 ? 'active' : 'no'
						]"
						@click="selItem(course)"
					>
						<view class="flex_fs">
							<image
								:src="`${setting.oss_pub_domain}/app-img/icon/icon-checkbox${
									selList.findIndex((el) => el.id == course.id) >= 0 ? '' : '-no'
								}.png`"
								class="icon-size-32"
							></image>
							<view class="uni-ml-12">
								<view class="z-font-32 u-line-1" style="width: 580rpx">{{ course.name }}</view>
								<view class="uni-color-grey z-font-24 uni-mt-12">
									关联{{ course.relQuestionCount }}个问题 | 关联{{ course.relSchemeCount }}个解决方案
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<z-no-data v-else placeholder="暂无课程"></z-no-data>
		</view>
		<view v-else>
			<view v-if="data[0] && data[0].list && data[0].list.length">
				<view
					v-for="item in data[0].list"
					:key="item.id"
					:class="['plan-box active', selList.findIndex((el) => el.id == item.id) >= 0 ? 'active' : 'no']"
					@click="selItem(item)"
				>
					<view class="flex_fs">
						<image
							:src="`${setting.oss_pub_domain}/app-img/icon/icon-checkbox${
								selList.findIndex((el) => el.id == item.id) >= 0 ? '' : '-no'
							}.png`"
							class="icon-size-32"
						></image>
						<view class="uni-ml-12">
							<view class="z-font-32 u-line-1" style="width: 580rpx">{{ item.name }}</view>
							<view class="uni-color-grey z-font-24 uni-mt-12">
								关联{{ item.relQuestionCount }}个问题 | 关联{{ item.relSchemeCount }}个解决方案
							</view>
						</view>
					</view>
				</view>
			</view>
			<z-no-data v-else placeholder="暂无课程"></z-no-data>
		</view>
	</scroll-view>
	<bottom-box :buts="buts" @change="buttonClick" :interval="false" intervalBg="#FFFFFF"></bottom-box>
</template>

<script setup>
import { getCourseList as getSystemCourseList } from '@/api/course';
import { getCourseList } from '@/api/player.js';
import { getPlanList } from '@/api/plan.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance(),
	eventChannel = that.getOpenerEventChannel(),
	playerInfo = uni.getStorageSync('player-info'),
	selList = reactive([]),
	type = ref(0);

onLoad((opt) => {
	const selCourse = uni.getStorageSync('select-course') || [];
	if (selCourse instanceof Array) selList.push(...selCourse);
	type.value = parseInt(opt.type || 0);
	if (type.value) {
		data[0].fun = getCourseList;
		data[1].fun = getCourseList;
	}
	fetchData(0);
	fetchData(1);
});

// 头部切换
const tabStatus = ref(0);
function switchTab(index) {
	if (index === tabStatus.value) return;
	tabStatus.value = index;
}
// 选择课程
function selItem(item) {
	if (type.value) selList[0] = item;
	else {
		const index = selList.findIndex((el) => el.id === item.id);
		if (index >= 0) selList.splice(index, 1);
		else selList.push(item);
	}
}
//  加载数据
const data = reactive([
	{
		list: [],
		pageNum: 1,
		pageSize: 10,
		total: 0,
		fun: getSystemCourseList
	},
	{
		list: [],
		pageNum: 1,
		pageSize: 10,
		total: 0,
		fun: getPlanList
	}
]);
function search(name) {
	this.pageNum = 1;
	fetchData(tabStatus.value, { name });
}

function fetchData(index, query = {}) {
	const params = {
		pageNum: data[index].pageNum,
		pageSize: data[index].pageSize,
		type: index,
		course: 1,
		userId: playerInfo.id,
		...query
	};

	
	data[index].fun(params).then((res) => {
		if (type.value && index)
			res.rows.forEach((item) => {
				item.courseList = item.relStuCourseList;
			});
		if (data[index].pageNum === 1) data[index].list = res.rows;
		else data[index].list.push(...res.rows);
		data[index].total = res.total;
	});
}

function nextPage() {
	if (data[tabStatus.value].list.length === data[tabStatus.value].total) return;
	data[tabStatus.value].pageNum += 1;
	fetchData(tabStatus.value);
}

const buts = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];
function buttonClick() {
	eventChannel.emit('selCourse', selList);
	uni.navigateBack();
}

function countScheme(qs) {
	let count = 0;
	// qs.
	if (!qs.length) return count;
	qs.forEach((item) => {
		if (item.questionSchemeList && item.questionSchemeList.length) count += item.questionSchemeList.length;
	});
	return count;
}

function allSelete(item) {
	if (type.value) return;
	const intersect = selList.filter((v) => item.courseList.findIndex((c) => c.id == v.id) > -1);
	if (intersect.length == item.courseList.length) {
		item.courseList.forEach((item) => {
			const index = selList.findIndex((el) => el.id === item.id);
			selList.splice(index, 1);
		});
	} else {
		const unionSet = item.courseList.concat(
			selList.filter((v) => !(item.courseList.findIndex((c) => c.id == v.id) > -1))
		);
		selList.push(...unionSet);
	}
}
</script>

<style lang="scss">
@import '@/assets/select.scss';
.switch-box {
	width: 100%;
	height: 88rpx;
	background: $uni-F5F5F5;
	border-radius: 24rpx;
	box-sizing: border-box;
	padding: 0 8rpx;
	.item {
		width: 336rpx;
		height: 72rpx;
		border-radius: 16rpx;
		line-height: 72rpx;
		text-align: center;
	}
}
.system-box {
	width: 100%;
	height: 88rpx;
	background: $uni-F5F5F5;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 0 24rpx;
	margin-top: 30rpx;
}
</style>
